<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/area.js"></script>
    <style>
        .content{}
        .content ul{}
        .content ul li{position: relative;line-height: 30px;padding: 10px;overflow: hidden;}
        .content ul li .left{float: left;color: #666;width: 25%;}
        .content ul li .left span{display: block;width: 100%;text-align: justify;}
        .content ul li .right{float: right;color: #333;width: 75%;overflow: hidden;position: relative;}
        .content ul li .right span{float: right;color: #666;}
        .content ul li .right p{padding-left: 10px;color: #333;font-size: 16px;}
        .content ul li .select select{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .select span{float: right;color: #666;}
        .content ul li .input{height: 30px;}
        .content ul li .input label{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;z-index: 3;}
        .content ul li .input label input{background-color: transparent;}
        .content ul li .input span{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;text-align: right;}
        .content ul li .right .area{padding-left: 3%;}
        .content ul li .right .area select{width: 30%;font-size: 13px;line-height: 24px;border: none;background-color: #EFEFEF;}

    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">个人资料</div>
        <div class="right">
            <a href="">保存</a>
        </div>
    </div>
</header>
<div class="content">
    <ul>
        <li class="bottom-line">
            <div class="left">
                <span class="name">ID</span>
            </div>
            <div class="right">
                <p>20163445252533</p>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">昵称</span>
            </div>
            <div class="right input nickname">
                <label>
                    <input type="text" placeholder="请输入" maxlength="5"/>
                </label>
                <span><i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">地区</span>
            </div>
            <div class="right">
                <label class="area">
                    <select id="s_province" class="prov">
                        <option value="0">选择省份</option>
                    </select>
                    <select id="s_city" class="city">
                        <option value="0">选择城市</option>
                    </select>
                    <select id="s_county" class="district">
                        <option value="0">选择地区</option>
                    </select>
                </label>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">性别</span>
            </div>
            <div class="right select sex">
                <select>
                    <option>男</option>
                    <option>女</option>
                    <option>不限</option>
                </select>
                <span><i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">年龄</span>
            </div>
            <div class="right input age">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <span>岁</span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">身高</span>
            </div>
            <div class="right input high">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <span>CM</span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">职业</span>
            </div>
            <div class="right select job">
                <select>
                    <option>模特</option>
                    <option>丽人</option>
                    <option>摄影</option>
                    <option>设计</option>
                    <option>生活服务</option>
                    <option>语言练习</option>
                    <option>专业咨询</option>
                    <option>影视表演</option>
                </select>
                <span><i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">体重</span>
            </div>
            <div class="right input high">
                <label>
                    <input type="number" placeholder="请输入" maxlength="5"/>
                </label>
                <span>kg</span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">兴趣</span>
            </div>
            <div class="right select interest">
                <select>
                    <option>模特</option>
                    <option>丽人</option>
                    <option>摄影</option>
                    <option>设计</option>
                    <option>生活服务</option>
                    <option>语言练习</option>
                    <option>专业咨询</option>
                    <option>影视表演</option>
                </select>
                <span><i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">
                <span class="name">签名</span>
            </div>
            <div class="right input high">
                <label>
                    <input type="text" placeholder="请输入" maxlength="5"/>
                </label>
                <span><i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>
    </ul>
</div>
</body>
<script>
    _init_area();
</script>
</html>